<template>
  <div class="news-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <div class="header-content">
          <div class="header-left">
            <h1 class="page-title">
              <el-icon class="title-icon"><Document /></el-icon>
              系统动态
            </h1>
            <p class="page-subtitle">了解医院最新资讯，关注健康科普知识</p>
          </div>
          <div class="header-stats">
            <div class="stat-item">
              <div class="stat-number">{{ totalNews }}</div>
              <div class="stat-label">动态总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ getTotalViews() }}</div>
              <div class="stat-label">总浏览量</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">5</div>
              <div class="stat-label">栏目分类</div>
            </div>
          </div>
        </div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/portal' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>系统动态</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    
    <div class="container main-content">
      <!-- 顶部筛选区域 -->
      <div class="filter-section">
        <el-card class="filter-card" shadow="hover">
          <div class="filter-header">
            <el-icon class="filter-icon"><Filter /></el-icon>
            <span class="filter-title">内容筛选</span>
          </div>
          <div class="filter-content">
            <div class="filter-tabs">
              <el-radio-group v-model="activeTab" @change="handleTabChange" class="tab-group">
                <el-radio-button label="all">全部动态</el-radio-button>
                <el-radio-button label="hospital">系统新闻</el-radio-button>
                <el-radio-button label="media">媒体报道</el-radio-button>
                <el-radio-button label="health">健康科普</el-radio-button>
                <el-radio-button label="notice">通知公告</el-radio-button>
              </el-radio-group>
            </div>
            <div class="search-area">
              <el-input
                v-model="searchKeyword"
                placeholder="搜索动态标题或内容"
                class="search-input"
                clearable
                @keyup.enter="searchNews"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
                <template #append>
                  <el-button type="primary" @click="searchNews">搜索</el-button>
                </template>
              </el-input>
            </div>
          </div>
        </el-card>
      </div>
      
      <div class="news-content">
        <!-- 左侧新闻列表 -->
        <div class="news-main">
          <div class="news-header">
            <h2 class="section-title">
              <el-icon><List /></el-icon>
              动态列表
              <span class="result-count">（共 {{ filteredNews.length }} 条）</span>
            </h2>
            <div class="view-controls">
              <el-radio-group v-model="viewMode" @change="handleViewModeChange">
                <el-radio-button label="card">卡片视图</el-radio-button>
                <el-radio-button label="list">列表视图</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          
          <div v-if="displayedNews.length > 0" class="news-container">
            <!-- 卡片视图 -->
            <div v-if="viewMode === 'card'" class="news-grid">
              <el-card
                v-for="(news, index) in displayedNews"
                :key="index"
                class="news-card"
                shadow="hover"
                @click="goToNewsDetail(news.id)"
              >
                <div class="news-card-content">
                  <div v-if="news.image" class="news-image">
                    <img :src="news.image" :alt="news.title">
                    <div class="image-overlay">
                      <el-icon><View /></el-icon>
                    </div>
                  </div>
                  <div class="news-info" :class="{ 'no-image': !news.image }">
                    <div class="news-meta-top">
                      <el-tag :type="getCategoryType(news.category)" size="small">
                        {{ news.category }}
                      </el-tag>
                      <span class="news-date">{{ formatDate(news.date) }}</span>
                    </div>
                    <h3 class="news-title">{{ news.title }}</h3>
                    <p class="news-summary">{{ news.summary }}</p>
                    <div class="news-footer">
                      <div class="news-stats">
                        <span class="views">
                          <el-icon><View /></el-icon>
                          {{ news.views }}
                        </span>
                      </div>
                      <el-button type="primary" size="small" plain>
                        阅读全文
                        <el-icon><ArrowRight /></el-icon>
                      </el-button>
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
            
            <!-- 列表视图 -->
            <div v-else class="news-list">
              <el-card
                v-for="(news, index) in displayedNews"
                :key="index"
                class="news-list-item"
                shadow="hover"
                @click="goToNewsDetail(news.id)"
              >
                <div class="news-list-content">
                  <div v-if="news.image" class="news-list-image">
                    <img :src="news.image" :alt="news.title">
                  </div>
                  <div class="news-list-info">
                    <div class="news-meta">
                      <el-tag :type="getCategoryType(news.category)" size="small">
                        {{ news.category }}
                      </el-tag>
                      <span class="news-date">{{ formatDate(news.date) }}</span>
                      <span class="news-views">
                        <el-icon><View /></el-icon>
                        {{ news.views }}
                      </span>
                    </div>
                    <h3 class="news-title">{{ news.title }}</h3>
                    <p class="news-summary">{{ news.summary }}</p>
                  </div>
                  <div class="news-actions">
                    <el-button type="primary" size="small" plain>
                      查看详情
                    </el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          
          <el-empty v-else description="暂无相关动态" />
          
          <!-- 分页 -->
          <div class="pagination-container" v-if="filteredNews.length > 0">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="filteredNews.length"
              :page-size="pageSize"
              :current-page="currentPage"
              :page-sizes="[6, 12, 18, 24]"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
            />
          </div>
        </div>
        
        <!-- 右侧信息栏 -->
        <div class="news-sidebar">
          <!-- 热门动态 -->
          <el-card class="sidebar-card" shadow="hover">
            <template #header>
              <div class="sidebar-header">
                <el-icon class="sidebar-icon"><TrendCharts /></el-icon>
                <span class="sidebar-title">热门动态</span>
              </div>
            </template>
            <div class="hot-news-list">
              <div
                v-for="(item, index) in hotNewsList"
                :key="index"
                class="hot-news-item"
                @click="goToNewsDetail(item.id)"
              >
                <div class="hot-rank" :class="{ 'top-rank': index < 3 }">
                  {{ index + 1 }}
                </div>
                <div class="hot-content">
                  <h4 class="hot-title">{{ item.title }}</h4>
                  <div class="hot-meta">
                    <span class="hot-views">{{ item.views }}</span>
                    <el-icon class="hot-icon"><TrendCharts /></el-icon>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
          
          <!-- 健康科普 -->
          <el-card class="sidebar-card" shadow="hover">
            <template #header>
              <div class="sidebar-header">
                <el-icon class="sidebar-icon"><Reading /></el-icon>
                <span class="sidebar-title">健康科普</span>
              </div>
            </template>
            <div class="health-tips">
              <div
                v-for="(tip, index) in healthTips"
                :key="index"
                class="health-tip-item"
                @click="goToNewsDetail(tip.id)"
              >
                <div class="tip-image">
                  <img :src="tip.image" :alt="tip.title">
                  <div class="tip-overlay">
                    <el-icon><Reading /></el-icon>
                  </div>
                </div>
                <div class="tip-info">
                  <h4 class="tip-title">{{ tip.title }}</h4>
                  <p class="tip-date">{{ formatDate(tip.date) }}</p>
                </div>
              </div>
            </div>
          </el-card>
          
          <!-- 分类统计 -->
          <el-card class="sidebar-card" shadow="hover">
            <template #header>
              <div class="sidebar-header">
                <el-icon class="sidebar-icon"><PieChart /></el-icon>
                <span class="sidebar-title">分类统计</span>
              </div>
            </template>
            <div class="category-stats">
              <div
                v-for="(stat, index) in categoryStats"
                :key="index"
                class="category-stat-item"
                @click="filterByCategory(stat.key)"
              >
                <div class="stat-info">
                  <span class="stat-name">{{ stat.name }}</span>
                  <span class="stat-count">{{ stat.count }}篇</span>
                </div>
                <div class="stat-bar">
                  <div
                    class="stat-progress"
                    :style="{ width: stat.percentage + '%', backgroundColor: stat.color }"
                  ></div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const activeTab = ref('all')
const searchKeyword = ref('')
const viewMode = ref('card')
const currentPage = ref(1)
const pageSize = ref(12)

// 新闻数据
const allNews = ref([
  {
    id: 1,
    title: '我院成功开展首例AI辅助机器人手术',
    category: '系统新闻',
    date: '2023-12-15',
    views: 2568,
    image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    summary: '12月10日，我院外科团队成功完成首例AI辅助机器人手术，标志着医院在智能医疗领域取得重大突破。手术过程中，AI系统实时分析患者生理参数，为医生提供精准的手术指导，大大提高了手术成功率和患者安全性。'
  },
  {
    id: 2,
    title: '2024年春节期间门诊安排通知',
    category: '通知公告',
    date: '2023-12-12',
    views: 1832,
    image: '',
    summary: '根据国务院办公厅关于2024年春节假期安排的通知，我院将于2024年2月9日至2月17日期间调整门诊安排。急诊科24小时正常接诊，其他科室安排详见具体通知。'
  },
  {
    id: 3,
    title: '央视《健康中国》报道我院远程医疗服务',
    category: '媒体报道',
    date: '2023-12-10',
    views: 3421,
    image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    summary: '中央电视台《健康中国》栏目深度报道了我院远程医疗服务体系建设成果。通过5G技术和远程诊疗平台，我院已为偏远地区患者提供高质量医疗服务超过10000人次。'
  },
  {
    id: 4,
    title: '冬季养生指南：如何预防呼吸道疾病',
    category: '健康科普',
    date: '2023-12-08',
    views: 2845,
    image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    summary: '冬季是呼吸道疾病高发期，本文为您详细介绍冬季养生要点，包括饮食调理、运动保健、环境卫生等方面的注意事项，帮助您健康过冬。'
  },
  {
    id: 5,
    title: '我院荣获"国家智慧医院建设示范单位"称号',
    category: '系统新闻',
    date: '2023-12-05',
    views: 1967,
    image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    summary: '在2023年国家智慧医院建设评选中，我院凭借在数字化转型、智能诊疗、便民服务等方面的突出表现，荣获"国家智慧医院建设示范单位"荣誉称号。'
  },
  {
    id: 6,
    title: '科学防癌：早发现、早诊断、早治疗',
    category: '健康科普',
    date: '2023-12-03',
    views: 3156,
    image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    summary: '癌症虽然可怕，但通过科学的预防和早期筛查，可以大大降低发病率和死亡率。本文为您介绍常见癌症的预防措施和早期症状，倡导健康生活方式。'
  },
  {
    id: 7,
    title: '我院与北京协和医院签署战略合作协议',
    category: '系统新闻',
    date: '2023-12-01',
    views: 2234,
    image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    summary: '11月28日，我院与北京协和医院正式签署战略合作协议。双方将在医疗技术、人才培养、科研合作等方面开展深度合作，共同推进医疗服务水平提升。'
  },
  {
    id: 8,
    title: '关于医保电子凭证全面启用的通知',
    category: '通知公告',
    date: '2023-11-28',
    views: 1543,
    image: '',
    summary: '为提升患者就医体验，我院自2023年12月1日起全面启用医保电子凭证。患者可通过国家医保服务平台APP、微信、支付宝等渠道激活使用。'
  },
  {
    id: 9,
    title: '《人民日报》点赞我院互联网医院建设成果',
    category: '媒体报道',
    date: '2023-11-25',
    views: 2687,
    image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    summary: '《人民日报》头版报道了我院互联网医院建设成果，充分肯定了医院在"互联网+医疗健康"方面的创新实践和显著成效。'
  },
  {
    id: 10,
    title: '糖尿病患者的饮食管理指南',
    category: '健康科普',
    date: '2023-11-22',
    views: 2978,
    image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    summary: '合理的饮食管理是糖尿病治疗的重要组成部分。本文详细介绍了糖尿病患者的饮食原则、食物选择技巧和日常注意事项。'
  },
  {
    id: 11,
    title: '我院成功举办第六届国际医学论坛',
    category: '系统新闻',
    date: '2023-11-20',
    views: 1845,
    image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    summary: '11月18-19日，第六届国际医学论坛在我院成功举办。来自20多个国家的500余名医学专家参会，共同探讨医学前沿技术和发展趋势。'
  },
  {
    id: 12,
    title: '关于开展全民健康体检优惠活动的通知',
    category: '通知公告',
    date: '2023-11-15',
    views: 1234,
    image: '',
    summary: '为提高全民健康意识，我院将于2023年12月1日至2024年1月31日开展全民健康体检优惠活动。活动期间，多种体检套餐享受8折优惠。'
  }
])

// 计算属性
const filteredNews = computed(() => {
  let result = [...allNews.value]
  
  // 按类别筛选
  if (activeTab.value !== 'all') {
    const categoryMap = {
      'hospital': '系统新闻',
      'media': '媒体报道',
      'health': '健康科普',
      'notice': '通知公告'
    }
    result = result.filter(news => news.category === categoryMap[activeTab.value])
  }
  
  // 关键词搜索
  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(news => 
      news.title.toLowerCase().includes(keyword) || 
      news.summary.toLowerCase().includes(keyword)
    )
  }
  
  return result
})

const displayedNews = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredNews.value.slice(start, end)
})

const totalNews = computed(() => allNews.value.length)

// 热门新闻列表
const hotNewsList = computed(() => {
  return [...allNews.value]
    .sort((a, b) => b.views - a.views)
    .slice(0, 6)
    .map(news => ({
      id: news.id,
      title: news.title,
      views: `${news.views}次浏览`
    }))
})

// 健康科普
const healthTips = computed(() => {
  return allNews.value
    .filter(news => news.category === '健康科普')
    .slice(0, 3)
})

// 分类统计
const categoryStats = computed(() => {
  const categories = ['系统新闻', '媒体报道', '健康科普', '通知公告']
  const total = allNews.value.length
  const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C']
  
  return categories.map((category, index) => {
    const count = allNews.value.filter(news => news.category === category).length
    const percentage = total > 0 ? Math.round((count / total) * 100) : 0
    
    return {
      name: category,
      count,
      percentage,
      color: colors[index],
      key: ['hospital', 'media', 'health', 'notice'][index]
    }
  })
})

// 方法
const getTotalViews = () => {
  return allNews.value.reduce((total, news) => total + news.views, 0).toLocaleString()
}

const getCategoryType = (category) => {
  const typeMap = {
    '系统新闻': 'primary',
    '媒体报道': 'success',
    '健康科普': 'warning',
    '通知公告': 'danger'
  }
  return typeMap[category] || 'info'
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const handleTabChange = () => {
  currentPage.value = 1
}

const searchNews = () => {
  currentPage.value = 1
}

const handleViewModeChange = () => {
  if (viewMode.value === 'card') {
    pageSize.value = 12
  } else {
    pageSize.value = 10
  }
  currentPage.value = 1
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handlePageChange = (page) => {
  currentPage.value = page
}

const filterByCategory = (categoryKey) => {
  activeTab.value = categoryKey
  currentPage.value = 1
}

const goToNewsDetail = (id) => {
  router.push(`/portal/news/${id}`)
}

onMounted(() => {
  // 初始化
})
</script>

<style scoped>
.news-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
  backdrop-filter: blur(10px);
  padding: 30px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 32px;
  color: #2c3e50;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.title-icon {
  margin-right: 12px;
  font-size: 36px;
  color: #1989fa;
}

.page-subtitle {
  font-size: 16px;
  color: #646566;
  margin: 0;
}

.header-stats {
  display: flex;
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1989fa;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #646566;
}

/* 主要内容区 */
.main-content {
  padding: 30px 0;
}

/* 筛选区域 */
.filter-section {
  margin-bottom: 30px;
}

.filter-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-icon {
  font-size: 20px;
  color: #1989fa;
  margin-right: 10px;
}

.filter-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.filter-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filter-tabs .tab-group {
  margin-bottom: 0;
}

.search-area {
  max-width: 500px;
}

.search-input {
  width: 100%;
}

/* 新闻内容区 */
.news-content {
  display: flex;
  gap: 30px;
}

.news-main {
  flex: 2;
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.section-title {
  font-size: 20px;
  color: #2c3e50;
  margin: 0;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.section-title .el-icon {
  margin-right: 10px;
  color: #1989fa;
}

.result-count {
  font-size: 14px;
  color: #909399;
  font-weight: normal;
  margin-left: 10px;
}

/* 卡片视图 */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
}

.news-card {
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.news-card-content {
  padding: 0;
}

.news-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card:hover .news-image img {
  transform: scale(1.1);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.news-card:hover .image-overlay {
  opacity: 1;
}

.image-overlay .el-icon {
  font-size: 32px;
  color: white;
}

.news-info {
  padding: 20px;
}

.news-info.no-image {
  padding: 24px;
}

.news-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.news-date {
  font-size: 14px;
  color: #909399;
}

.news-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-summary {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-stats .views {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #909399;
}

/* 列表视图 */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-list-item {
  border-radius: 8px;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.news-list-item:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.news-list-content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.news-list-image {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.news-list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-list-info {
  flex: 1;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.news-views {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #909399;
}

.news-actions {
  flex-shrink: 0;
}

/* 侧边栏 */
.news-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
  display: flex;
  align-items: center;
}

.sidebar-icon {
  font-size: 18px;
  color: #1989fa;
  margin-right: 8px;
}

.sidebar-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

/* 热门动态 */
.hot-news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hot-news-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.hot-news-item:hover {
  background-color: #f8f9fa;
}

.hot-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f2f5;
  color: #909399;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}

.top-rank {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: white;
}

.hot-content {
  flex: 1;
  min-width: 0;
}

.hot-title {
  font-size: 14px;
  color: #2c3e50;
  margin: 0 0 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hot-news-item:hover .hot-title {
  color: #1989fa;
}

.hot-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hot-views {
  font-size: 12px;
  color: #909399;
}

.hot-icon {
  font-size: 12px;
  color: #e6a23c;
}

/* 健康科普 */
.health-tips {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.health-tip-item {
  display: flex;
  gap: 12px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.health-tip-item:hover {
  background-color: #f8f9fa;
}

.tip-image {
  position: relative;
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.tip-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tip-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.health-tip-item:hover .tip-overlay {
  opacity: 1;
}

.tip-overlay .el-icon {
  font-size: 20px;
  color: white;
}

.tip-info {
  flex: 1;
  min-width: 0;
}

.tip-title {
  font-size: 14px;
  color: #2c3e50;
  margin: 0 0 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.health-tip-item:hover .tip-title {
  color: #1989fa;
}

.tip-date {
  font-size: 12px;
  color: #909399;
  margin: 0;
}

/* 分类统计 */
.category-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category-stat-item {
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.category-stat-item:hover {
  background-color: #f8f9fa;
}

.stat-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.stat-name {
  font-size: 14px;
  color: #2c3e50;
  font-weight: 500;
}

.stat-count {
  font-size: 14px;
  color: #606266;
  font-weight: 600;
}

.stat-bar {
  height: 6px;
  background-color: #f0f2f5;
  border-radius: 3px;
  overflow: hidden;
}

.stat-progress {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .news-content {
    flex-direction: column;
  }
  
  .news-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .header-stats {
    gap: 20px;
  }
  
  .news-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .filter-content {
    gap: 15px;
  }
  
  .filter-tabs .tab-group {
    width: 100%;
  }
  
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .news-list-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .news-list-image {
    width: 100%;
    height: 200px;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 15px;
  }
  
  .news-main {
    padding: 20px 15px;
  }
}
</style> 